<template>
      <el-container  class="home-container">
          <!-- 头部区域 -->
        <el-aside :width="isCollapse ?'64px': '200px'">
            <el-menu
                class="el-menu-vertical-demo"
                background-color="#1546a5"
                text-color="#ffffff"
                active-text-color="yellow"
                :unique-opened="true"
                :collapse="isCollapse"
                :collapse-transition="false"
                router
                @open="handleOpen"
                @close="handleClose"
                :default-active="activePath"
                >
                <!-- 一级菜单 -->
                <!-- <el-menu-item >
                    <el-menu-item slot="title">
                        <span>{{item.authName}}</span>
                    </el-menu-item>
                </el-menu-item> -->
                <!-- 一级菜单 -->
                <el-submenu :index="item.id+''" v-for="item in menulist" :key="item.id">
                    <template slot="title">
                        <i class="el-icon-s-platform"></i>
                        <span>{{item.authName}}</span>
                    </template>
                    <!-- 二级菜单 -->
                    <el-menu-item :index="'/'+subitem.path+''" v-for="subitem in item.children" :key="subitem.id" @click="saveNavState('/'+subitem.path+'')">
                        <template>
                            <!-- 图标 -->
                            <i class="el-icon-chat-dot-round"></i>
                            <!-- 文本 -->
                            <span>{{subitem.authName}}</span>
                        </template>
                    </el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container>
            <!-- 侧边栏区域 -->
            <el-header class="home-header">
                <i class="el-icon-s-fold toggle-button" style="font-size:25px" :label="false" @click="toggleCollapse"></i>
                <!-- <i class="el-icon-s-unfold" style="font-size:25px" :label="true"></i> -->
                <el-button type="danger" plain @click="logout()">退出登录</el-button>
            </el-header>
            <el-page-header @back="goBack" content="详情页面"></el-page-header>
           <!-- 页面主体区域 -->
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
        </el-container>
</template>

<script>
export default {
  data () {
    return {
      msg: '',
      isCollapse: true,
      menulist: [],          //左侧菜单数据
      isCollapse: false,     //是否折叠菜单
      activePath: ''         //被激活链接的地址
    }
  },
  methods: {
      //退出登录
      logout(){
          //清空token
          window.sessionStorage.clear()
          //跳转登录页
          this.$router.push('/login')
      },
    //   侧边菜单
    handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      //详情页的返回
      goBack() {
        console.log('go back');
      },
      //获取所有的菜单
      async getMenuList(){
          const {data:res} = await this.$http.get('menus')
          //console.log(res)
          //获取左侧菜单列表数据失败
          if(res.meta.status!==200) return this.$message.error(res.meta.msg)
          this.menulist = res.data
      },
      // 展开收缩左侧菜单
      toggleCollapse(){
          this.isCollapse = !this.isCollapse
      },
      // 保存链接的激活状态
      saveNavState(activePath){
          window.sessionStorage.setItem('activePath',activePath)
          this.activePath = activePath
      }
  },
  created() {
      this.getMenuList(),
      this.activePath = window.sessionStorage.getItem('activePath')
  },
}
</script>

<style scoped>
  .el-header{
    padding: 15px;
    border-bottom: 1px solid #d3d7db;
    border-top: 1px solid #eee;
    background: #f7f7f7;
    position: relative;
  }
    .el-aside {
    background-color: #1546a5;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
    .el-main {
    background-color: #e4e7ea;
    color: #333;
    /* text-align: center;
    line-height: 160px; */
  }
  .el-menu{
      border-right: none;
  }
  .el-menu i{
      color: #f7f7f7;
  }
  .el-menu-item{
    margin-left: 15px;
  }
  .home-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .home-container{
      height: 100%;
  }
  /* 左侧导航菜单展开收缩按钮 */
  .toggle-button{
      
  }
</style>
